<template>
  <div>
    <router-view></router-view>
    <img
      src="@/assets/css/images/file1.svg"
      alt=""
      style="width: 45px; height: 45px; vertical-align: middle"
    />
    <b> 文件分类</b>
    <br /><br />
    <el-card>
      <el-row>
        <el-col span="14">
          <div
            style="height:80vh;width:100%;margin-top:7%"
            class="category"
            id="statistic"
            ref="statistic"
          ></div>
        </el-col>
        <el-col span="10">
          <categories></categories>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import categories from "./fileCategory.vue";
export default {
  components: {
    categories,
  },
  data() {
    return {
      chartInstane: null,
      // 扇形图所有数据
      allData: null,
      tableData: [],
      form: {
        uno: "",
      },
      cateList1: [
        {
          value: "",
          name: "",
        },
      ],
      cateList2: [
        {
          value: "",
          name: "",
        },
      ],
      fileList: [
        "mp4",
        "avi",
        "doc",
        "ppt",
        "xls",
        "pdf",
        "png",
        "jpg",
        "zip",
        "rar",
        "txt",
        "html",
        "exe",
      ],
    };
  },
  mounted() {
    this.getData();
    setTimeout(() => {
      this.initChart();
    }, 800);
  },
  methods: {
    getData() {
      this.form.uno = parseInt(localStorage.getItem("rid")) + 1;
    //   console.log("uno:",localStorage.getItem("rid"));
      this.$http
        .post(`${this.systemURL}/userFile/fileStatic`, this.form)
        .then((res) => {
          console.log("表：", res);
          this.cateList1 = res.data.data.statistics1;
          this.cateList2 = res.data.data.statistics2;
          console.log("list:", this.cateList1);
        });
    },
    initChart() {
      this.chartInstane = this.$echarts.init(
        document.getElementById("statistic"),
        "vintage"
      );
      console.log("数据", this.cateList);
      const initOption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          width: "70%",
          itemGap: 29,
          data: this.fileList,
          type: "scroll",
          icon: "circle",
          right: "center",
          textStyle: {
            //图例文字的样式
            color: "black",
            fontSize: 14,
          },
          formatter: function(name) {
            if (!name) return "";
            if (name.length > 8) {
              name = name.slice(0, 25) + "...";
            }
            return name;
          },
        },

        series: [
          {
            name: "一级分类",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: this.cateList1,
          },
          {
            name: "二级分类",
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: this.cateList2,
            // [
            //   { value: 40, name: "MP4"},
            //   { value: 8, name: "avi"},
            //   { value: 15, name: "word"},
            //   { value: 5, name: "ppt" },
            //   { value: 5, name: "excel" },
            //   { value: 3, name: "pdf" },
            //   { value: 2, name: "png" },
            //   { value: 1, name: "jpg" },
            //   { value: 2, name: "zip" },
            //   { value: 1, name: "rar" },
            //   { value: 1, name: "txt" },
            // ]
          },
        ],
      };
      this.chartInstane.setOption(initOption);
    },
  },
};
</script>

<style lang="less" scoped></style>
